<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--    <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
    <!--    <title><%= htmlWebpackPlugin.options.title %></title>-->

</head>
<body>
<noscript>
    <!--    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>-->
</noscript>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.12/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.15.12/lib/index.js"></script>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别">
            </el-table-column>
        </el-table>
    </template>
</div>

<script>
    var Main = {
        data: () => ({
            tableData: []
        }),
        created() {
            // 在初始化的时候进行获取
            this.fetchData()
            // console.log("create")
            // console.log(this.tableData)
        },
        methods: {
            async fetchData() {
                const url = `http://localhost:8080/jsonVUE`;
                console.log(window.location.host);
                console.log(window.location.pathname);
                let aa = await fetch(url);
                console.log("aa")
                console.log(aa)
                let bb = await aa.text();
                console.log("bb")
                console.log(bb)
                let cc = JSON.parse(bb)
                console.log("cc")
                console.log(cc)
                let dd = cc
                console.log("dd")
                console.log(dd)

                this.tableData = dd
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>
